:root {
  --primary-color: #2681ff;
  --info-color: #00baff;
  --info-text-color: #8eeeff;
  --text-color: #d8d8d8;
  --bg-color: #1d262e;
  --border-color: #3a4659;
}

.list {
  height: 100%;

  .menu {
    padding-top: 40px;

    li {
      padding-left: 40px;
      position: relative;
      height: 50px;
      line-height: 40px;
      display: flex;
      font-size: 14px;
      align-items: center;
      cursor: pointer;
      color: #fff;

      &:hover {
        color: var(--primary-color);
      }

      i {
        margin-right: 10px;
      }

      &.is-active {
        background-image: linear-gradient(-90deg, rgba(0, 186, 255, .19) 0, rgba(38, 129, 255, .89) 100%);
        background-repeat: round;

        &:hover {
          color: #fff;
        }
      }
    }
  }

  .el-menu {
    border-right: none;
  }

  .el-menu.el-menu--horizontal {
    border-color: var(--bg-color);
    border-width: 2px;
  }

  .el-menu i {
    margin-right: 5px;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;

    &__header {
      padding: 30px 15px 20px 15px;
      box-sizing: border-box;
      width: 100%;
      height: auto !important;
      border-bottom: 1px solid #2d2d2d;
      background-color: #18181c;
    }

    &__box {
      width: 100%;
    }

    &__nav {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    &__add {
      margin-right: 12px;
      padding-left: 20px;
      width: 250px;
      height: 70px;
      box-sizing: border-box;
      vertical-align: middle;
      border: 1px solid var(--border-color);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      cursor: pointer;
      background-color: #1f262d;

      &:hover {
        border-color: var(--primary-color);

        img {
          transform: scale(1.1);
        }
      }

      img {
        margin-right: 10px;
      }

      p {
        color: #d9d9d9;
        font-size: 16px;
        font-weight: bold;
      }

      span {
        font-size: 12px;
        color: #8d8d8f;
      }

    }

    &__page {
      padding-right: 10px;
      display: flex;
      align-items: flex-end;
    }

    &__empty {
      svg {
        width: 200px;
        height: 200px;
      }
    }

    &__item {
      display: inline-block;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      width: 270px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 5px;
      border: 1px solid var(--border-color);

      &:hover {
        box-shadow: 0 0 20px 0 #000;
        border: 1px solid var(--info-color);
      }
    }

    &__main {
      font-size: 14px;
      width: 100%;
      padding: 8px 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #1c232c;
      box-sizing: border-box;
      color: var(--text-color);
      font-weight: bold;
      border-top: 0;

      a {
        color: #bcc9d4;
      }

      i {
        margin-right: 1px;
      }
    }

    &__view {
      margin-right: 2px;
    }

    &__menulist {
      display: flex;

      i {
        margin-right: 10px;
      }
    }

    &__start {
      display: flex;

      .content__btn {
        padding: 0;
        margin: 0 5px;
        width: 40px;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        opacity: 0.8;

        i {
          font-weight: bold;
        }
      }
    }

    &__status {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 5px;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background-color: var(--text-color);
      }

      &.is-active {
        .icon {
          background-color: var(--primary-color);
        }
      }
    }

    &__name {
      width: 100px;
      padding: 0 5px;
      line-height: 28px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #fff;
      border: 1px solid transparent;
    }

    &__logo {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;

      p {
        font-weight: bold;
        font-size: 18px;
        background-image: linear-gradient(120deg, #54b6d0 16%, #3f8bdb, #3f8bdb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
      }

      img {
        width: 100px !important;
        height: auto !important;
      }

      span {
        display: block;
        box-sizing: border-box;
        padding: 0 30px;
        line-height: 30px;
        color: #fff;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }

    }

    &__info {
      background-color: #20262c;
      position: relative;
      height: 150px;
    }

    &__menu {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(3px);
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    &__list {
      margin-top: 15px;

      i {
        cursor: pointer;
        margin: 0 5px;
        color: #fff;
        font-size: 20px;
      }
    }

    &__right {
      position: absolute;
      top: 5px;
      right: 10px;

      i {
        cursor: pointer;
        margin: 5px 5px;
        color: #fff;
        font-size: 16px;
      }
    }

    &__btn {
      margin: 5px 0;
      display: inline-block;
      vertical-align: middle;
      height: 34px;
      line-height: 34px;
      padding: 0 40px;
      box-sizing: border-box;
      outline: 0;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      background-image: linear-gradient(-225deg, var(--primary-color) 0, var(--info-color) 100%);
      background-color: var(--primary-color);
      border-color: var(--info-color);
      color: #fff;
      border: none;
      transition: .3s ease;
      cursor: pointer
    }

    &__info {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    &--active {
      box-shadow: 0 0 20px 0 #000;
      border: 1px solid #00baff;
    }
  }
}

.create {
  &-screen {
    display: flex;

    .item {
      padding: 10px 15px;
      margin: 10px 20px 10px 0;
      background: #36373b;
      border-radius: 5px;
      text-align: center;
      min-width: 100px;
      border: 1px solid #1e1e1f;
      cursor: pointer;

      &.is-active {
        border-color: #2681ff;
      }

      &-icon {
        width: 30px;
        height: 30px;
      }

      &-icon,
      &-title {
        color: #d6d6d7;
        font-weight: bold;
      }

      &-size {
        color: #989899;
        font-size: 12px;
      }
    }
  }
}